import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import WeatherIcon from './WeatherIcon';

// 天气预报项组件
// 用于显示未来几天的天气预报
const ForecastItem = ({ data }) => {
  // 格式化日期
  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const weekday = weekdays[date.getDay()];
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${month}/${day} ${weekday}`;
  };

  return (
    <View style={styles.container}>
      <Text style={styles.date}>{formatDate(data.fxDate)}</Text>
      
      <View style={styles.weatherInfo}>
        <WeatherIcon code={data.iconDay} size={30} />
        <Text style={styles.weatherText}>{data.textDay}</Text>
      </View>
      
      <View style={styles.temperatureContainer}>
        <Text style={styles.tempHigh}>{data.tempMax}°</Text>
        <View style={styles.tempBar}>
          <View 
            style={[
              styles.tempBarFill, 
              { 
                width: `${Math.min(100, Math.max(0, 
                  (parseInt(data.tempMax) - parseInt(data.tempMin)) / 40 * 100))}%` 
              }
            ]} 
          />
        </View>
        <Text style={styles.tempLow}>{data.tempMin}°</Text>
      </View>
      
      <Text style={styles.windInfo}>
        {data.windDirDay} {data.windScaleDay}级
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
  },
  date: {
    width: '25%',
    fontSize: 14,
    color: '#fff',
  },
  weatherInfo: {
    width: '20%',
    flexDirection: 'row',
    alignItems: 'center',
  },
  weatherText: {
    marginLeft: 5,
    fontSize: 14,
    color: '#fff',
  },
  temperatureContainer: {
    width: '35%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  tempHigh: {
    fontSize: 14,
    fontWeight: '500',
    color: '#fff',
  },
  tempBar: {
    flex: 1,
    height: 4,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    borderRadius: 2,
    marginHorizontal: 8,
  },
  tempBarFill: {
    height: '100%',
    backgroundColor: '#fff',
    borderRadius: 2,
  },
  tempLow: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.7)',
  },
  windInfo: {
    width: '20%',
    fontSize: 12,
    color: 'rgba(255, 255, 255, 0.7)',
    textAlign: 'right',
  },
});

export default ForecastItem;